//左侧渐入渐出
.left-in-enter-active {
  // transition-delay: 1s;
  animation: left-in 1.5s;
}
.left-in-leave-active {
  animation: left-out 1s;
}
@keyframes left-in {
  0% {
    opacity:0;
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes left-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity:0;
    transform: translateX(-50px);
  }
}
//右侧渐入渐出
.right-in-enter-active {
  // transition-delay: 1s;
  animation: right-in 1.5s;
}
.right-in-leave-active {
  animation: right-out 1s;
}
@keyframes right-in {
  0% {
    opacity:0;
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes right-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    opacity:0;
    transform: translateX(50px);
  }
}